<template>
	<view class="content" :style="{'height': wh + 'px'}">
		<!-- <callapse :localData="localData" @openEvt="open"></callapse> -->
		<view class="collapse" @click="open(item, index)" v-for="(item, index) in localData" :key="index">
			<view class="parent flex-1">
				<text>{{item.open}}</text>
				<image :class="['icons',item.open>0?'rotate':'rotate1']" src="/static/12.png" mode="widthFix"></image>
			</view>
			<view class="collapse-item" :style="{'height': item.open + 'px'}">
				<view class="children" v-for="(items, idx) in item.children" :key="idx">
					{{items.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		userEditObj
	} from '@/common/common.js'
	import callapse from '@/components/callapse.vue'
	export default {
		components: {
			callapse
		},
		data() {
			return {
				boole: false,
				localData: [],
				wh: 0
			}
		},
		onLoad() {
			setTimeout(() => {
				this.localData = userEditObj[0]
			}, 600)
			// this.localData = userEditObj[0]

			const system = uni.getSystemInfoSync()
			this.wh = system.windowHeight
		},
		methods: {
			open(item, index) {
				// const {
				// 	item,
				// 	index
				// } = e
				let len = this.localData[index].children
				item.open = item.open > 0 ? 0 : len.length * 30
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background: #F9F9F9;
	}
	.rotate {
		transform: rotate(180deg);
	}
	
	.rotate1 {
		transform: rotate(0deg);
	}
	
	.collapse {
		padding: 0 10px;
		overflow: hidden;
	
		.parent {
			height: 50px;
			position: relative;
			border-top: 1rpx solid #EEE;
			border-bottom: 1rpx solid #EEE;
			position: relative;
			z-index: 20;
			background: #FFF;
	
			.icons {
				width: 24px;
				transition: all .3s;
				position: absolute;
				right: 10px;
			}
		}
	
		.collapse-item {
			transition: all .2s;
			position: relative;
			z-index: 10;
	
			.children {
				position: relative;
				z-index: 5;
				background: #EEE;
				height: 30px;
				display: flex;
				align-items: center;
				padding: 0 10px;
			}
		}
	}
</style>